<template>
    <div class="box">
        <el-skeleton :rows="6" animated :loading="loading">
            <el-tabs v-model="activeName" @tab-click="handleClick">

                <el-tab-pane label="问题类型" name="first">
                    <div class="title">工单列表</div>
                    <div id="serch">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="">
                                <el-input v-model="formInline.name" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="reset" icon='el-icon-refresh'>重置</el-button>
                            </el-form-item>
                        </el-form>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item id="add">
                                <el-button type="primary" @click="dialogFormVisible = true"
                                    icon='el-icon-folder-add'>新增</el-button>
                            </el-form-item></el-form>

                    </div>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="id" label="编号" width="80" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="120" align="center">
                        </el-table-column>
                        <el-table-column prop="description" label="描述" align="center">
                        </el-table-column>
                        <el-table-column prop="type" label="是否启用" width="170" align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.type" active-text="启用" inactive-text="停用">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="action" label="描述操作" width="220" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" icon="el-icon-edit"
                                    @click="editbefore(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" icon="el-icon-delete"
                                    @click="delbefore(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="block" v-show="page">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[5,8]" :page-size="count"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>

                    <!-- <div class="block" v-show="page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-size="count" layout="prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div> -->
                    <!-- 添加弹框 -->
                    <el-dialog title="添加" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="名称" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="描述" :label-width="formLabelWidth">
                                <el-input v-model="form.description" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="启用状态" :label-width="formLabelWidth">
                                <el-select v-model="form.type" placeholder="请选择">
                                    <el-option label="启用" value=true></el-option>
                                    <el-option label="停用" value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addhandler">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 编辑弹框 -->

                    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
                        <el-form :model="form1">
                            <el-form-item label="名称" :label-width="formLabelWidth">
                                <el-input v-model="form1.name" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="描述" :label-width="formLabelWidth">
                                <el-input v-model="form1.description" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="启用状态" :label-width="formLabelWidth">
                                <el-select v-model="form1.type" placeholder="请选择">
                                    <el-option label="启用" value=true></el-option>
                                    <el-option label="停用" value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="edithandler">确 定</el-button>
                        </div>


                    </el-dialog>

                </el-tab-pane>
                <el-tab-pane label="紧急程度" name="second">
                    <div class="title">工单列表</div>
                    <div id="serch">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="">
                                <el-input v-model="formInline.name" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="reset" icon='el-icon-refresh'>重置</el-button>
                            </el-form-item>
                        </el-form>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item id="add">
                                <el-button type="primary" @click="dialogFormVisible = true"
                                    icon='el-icon-folder-add'>新增</el-button>
                            </el-form-item></el-form>

                    </div>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="id" label="编号" width="80" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="120" align="center">
                        </el-table-column>
                        <el-table-column prop="description" label="描述" align="center">
                        </el-table-column>
                        <el-table-column prop="type" label="是否启用" width="170" align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.type" active-text="启用" inactive-text="停用">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="action" label="描述操作" width="220" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" icon="el-icon-edit"
                                    @click="editbefore(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" icon="el-icon-delete"
                                    @click="delbefore(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <!-- <div class="block" v-show="page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-size="count" layout="prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div> -->

                    <div class="block" v-show="page">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[5]" :page-size="count"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                    <!-- 添加弹框 -->
                    <el-dialog title="添加" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="名称" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="描述" :label-width="formLabelWidth">
                                <el-input v-model="form.description" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="启用状态" :label-width="formLabelWidth">
                                <el-select v-model="form.type" placeholder="请选择">
                                    <el-option label="启用" value=true></el-option>
                                    <el-option label="停用" value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addhandler">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 编辑弹框 -->

                    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
                        <el-form :model="form1">
                            <el-form-item label="名称" :label-width="formLabelWidth">
                                <el-input v-model="form1.name" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="描述" :label-width="formLabelWidth">
                                <el-input v-model="form1.description" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="启用状态" :label-width="formLabelWidth">
                                <el-select v-model="form1.type" placeholder="请选择">
                                    <el-option label="启用" value=true></el-option>
                                    <el-option label="停用" value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="edithandler">确 定</el-button>
                        </div>


                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="关闭类型" name="third">
                    <div class="title">工单列表</div>
                    <div id="serch">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="">
                                <el-input v-model="formInline.name" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="reset" icon='el-icon-refresh'>重置</el-button>
                            </el-form-item>
                        </el-form>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item id="add">
                                <el-button type="primary" @click="dialogFormVisible = true"
                                    icon='el-icon-folder-add'>新增</el-button>
                            </el-form-item></el-form>

                    </div>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="id" label="编号" width="80" align="center">
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="120" align="center">
                        </el-table-column>
                        <el-table-column prop="description" label="描述" align="center">
                        </el-table-column>
                        <el-table-column prop="type" label="是否启用" width="170" align="center">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.type" active-text="启用" inactive-text="停用">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="action" label="描述操作" width="220" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" icon="el-icon-edit"
                                    @click="editbefore(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" icon="el-icon-delete"
                                    @click="delbefore(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <!-- <div class="block" v-show="page">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-size="count" layout="prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div> -->

                    <div class="block" v-show="page">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[5]" :page-size="count"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                    <!-- 添加弹框 -->
                    <el-dialog title="添加" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="名称" :label-width="formLabelWidth">
                                <el-input v-model="form.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="描述" :label-width="formLabelWidth">
                                <el-input v-model="form.description" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="启用状态" :label-width="formLabelWidth">
                                <el-select v-model="form.type" placeholder="请选择">
                                    <el-option label="启用" value=true></el-option>
                                    <el-option label="停用" value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addhandler">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 编辑弹框 -->

                    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
                        <el-form :model="form1">
                            <el-form-item label="名称" :label-width="formLabelWidth">
                                <el-input v-model="form1.name" autocomplete="off" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="描述" :label-width="formLabelWidth">
                                <el-input v-model="form1.description" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="启用状态" :label-width="formLabelWidth">
                                <el-select v-model="form1.type" placeholder="请选择">
                                    <el-option label="启用" value=true></el-option>
                                    <el-option label="停用" value=false></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="edithandler">确 定</el-button>
                        </div>


                    </el-dialog>
                </el-tab-pane>
            </el-tabs>
        </el-skeleton>



    </div>
</template>
<script>


export default {
    data() {
        return {
            loading: true,
            tableData: [],
            activeName: 'first',
            page: true,
            currentPage: 1,
            count: 5,
            total: 50,
            dialogFormVisible: false,
            dialogFormVisible1: false,
            formInline: { name: '', description: '' },
            form: { name: '', description: '', type: 'true' },
            form1: { name: '', description: '', type: true },
            formLabelWidth: '',
            dialogFormVisible3: false,
            dialogFormVisible4: false,
            dialogFormVisible5: false,
            dialogFormVisible6: false,
            editid: ''
        };
    },
    methods: {
        onSubmit() {
            this.$axios({
                url: `/Zdpz?name_like=${this.formInline.name.trim()}`,
                method: 'get',
            }).then(({ data }) => {
                this.tableData = data
            })
            this.page = false
            this.formInline.name = ''
        },
        handleClick(tab) {
            // console.log(tab._props.label);
            this.$store.commit('changeZiduan',tab._props.label)
        },
        handleSizeChange(count) {
            this.count = count
            this.render()
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage
            this.render()
        },
        render() {
            this.$axios({
                url: `/Zdpz?_limit=${this.count}&_page=${this.currentPage}`,
                method: 'get'
            }).then(({ data, headers }) => {
                // console.log(Number(headers['x-total-count']))
                this.tableData = data
                this.total = Number(headers['x-total-count'])

            })
            this.page = true
        },
        addhandler() {
            this.dialogFormVisible = false
            this.$axios({
                url: `/Zdpz`,
                method: 'post',
                data: {
                    name: this.form.name,
                    description: this.form.description,
                    type: this.form.type
                }
            }),
                // this.form = {},
                this.render()
            console.log(this.form.type);

        },
        editbefore(v) {
            this.dialogFormVisible1 = true
            this.form1 = {
                name: v.name,
                description: v.description,
                type: String(v.type)
            }
            this.editid = v.id
            console.log(this.form1);
            console.log(v.type);


        },
        edithandler() {
            this.dialogFormVisible1 = false


            this.$axios({
                url: `/Zdpz/${this.editid}`,
                method: 'patch',
                data: this.form1
            })
            this.render()
        },
        delbefore(v) {
            this.$axios({
                url: `/Zdpz/${v.id}`,
                method: 'delete',
            })
            this.render()
        },
        reset() {
            this.currentPage = 1
            this.render()
        }

    },
    mounted() {
        if(this.$store.state.ziduan=='问题类型'){
            this.$axios({
                url: `/Zdpz?_limit=${this.count}&_page=${this.currentPage}`,
                method: 'get'
            }).then(({ data, headers }) => {
                // console.log(Number(headers['x-total-count']))
                this.tableData = data
                this.total = Number(headers['x-total-count'])

            })
            this.page = true
        }
        setTimeout(() => {
            this.loading = false
        }, 1000)
        this.render()

    }

}


</script>
<style scoped>
.box {
    width: 90%;
    margin: auto;

}

/* .addbtn {
    display: flex;
    justify-content: space-between;
} */
.title {
    color: rgba(0, 0, 0, 0.525);
    display: flex;
    justify-content: left;
    margin-bottom: 10px;
}

#serch {
    display: flex;
    justify-content: space-between;
}

.block {
    margin: auto;
    margin-top: 20px;
}

/* #add {
    margin-left: 100px;
} */</style>
  